<template>
  <el-container>
    <!--    头部区域-->
    <el-header style="height: 80px">
      <TopMenu></TopMenu>
    </el-header>
    <!--    左侧菜单导航-->
    <el-container style="height: calc(100% - 80px)">
      <AsideMenu></AsideMenu>
      <el-main>
        <!--        顶部面包屑-->
        <Breadcrumb></Breadcrumb>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// 面包屑组件
import Breadcrumb from "@/components/layout/Breadcrumb";
//头部导航组件
import TopMenu from "@/components/layout/TopMenu";
//侧边栏菜单组件
import AsideMenu from "@/components/layout/AsideMenu";
export default {
  name: "index",
  components: {
    TopMenu,
    AsideMenu,
    Breadcrumb,
  },
  data() {
    return {};
  },

  created() {},
  mounted() {
    this.$store.commit("setMenu");
  },
};
</script>

<style scoped lang="scss">
.el-header {
  margin: 0;
  padding: 0;
  height: 80px;
}
.el-main {
  background-color: #edf0f9;
}
</style>
